﻿@{
    Lang lang = ViewBag.Lang;
    ViewBag.Title = lang.PROFILE;
    Layout = "~/Views/Shared/_LayoutMember.cshtml";
}
@model PortalAccount.PortalUser
<div id="panel_overview" class="tab-pane in active">
    <div class="row">
        <div class="col-sm-5 col-md-4">
            <div class="user-left">
                <div class="center">
                    <h4>
                        @Model.INFO.Name</h4>
                    <div class="fileupload fileupload-new" data-provides="fileupload">
                        <div class="user-image">
                            <div class="fileupload-new thumbnail">
                                <img src="@Model.INFO.Avatar" alt="">
                            </div>
                        </div>
                    </div>
                    <hr>
                    <p>
                        <a class="btn btn-twitter btn-sm btn-squared"><i class="fa fa-twitter"></i></a><a
                            class="btn btn-linkedin btn-sm btn-squared"><i class="fa fa-linkedin"></i></a>
                        <a class="btn btn-google-plus btn-sm btn-squared"><i class="fa fa-google-plus"></i>
                        </a><a class="btn btn-github btn-sm btn-squared"><i class="fa fa-github"></i></a>
                    </p>
                    <hr>
                </div>
                <table class="table table-condensed table-hover">
                    <thead>
                        <tr>
                            <th colspan="3">
                                @lang.CONTACTINFOMATION
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                @lang.NAME:
                            </td>
                            <td>
                                <a href="#">@Model.INFO.Name </a>
                            </td>
                            <td>
                                <a href="/Admin/ChangeInfo" class="show-tab"><i class="fa fa-pencil edit-user-info">
                                </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @lang.EMAIL:
                            </td>
                            <td>
                                <a href="">@Model.INFO.Email </a>
                            </td>
                            <td>
                                <a href="/Admin/ChangeInfo" class="show-tab"><i class="fa fa-pencil edit-user-info">
                                </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @lang.PHONE:
                            </td>
                            <td>
                                @Model.INFO.Phone
                            </td>
                            <td>
                                <a href="/Admin/ChangeInfo" class="show-tab"><i class="fa fa-pencil edit-user-info">
                                </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @lang.ADDRESS:
                            </td>
                            <td>
                                <a href="">@Model.INFO.Address</a>
                            </td>
                            <td>
                                <a href="/Admin/ChangeInfo" class="show-tab"><i class="fa fa-pencil edit-user-info">
                                </i></a>
                            </td>
                        </tr>
                         <tr>
                            <td>
                                @lang.SEX:
                            </td>
                            <td>
                                <a href="">@(Model.INFO.Sex=="M"?lang.MALE:lang.FEMALE)</a>
                            </td>
                            <td>
                                <a href="/Admin/ChangeInfo" class="show-tab"><i class="fa fa-pencil edit-user-info">
                                </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @lang.BIRTH:
                            </td>
                            <td>
                                <a href="">@(Model.INFO.Birthday.HasValue ? Model.INFO.Birthday.Value.ToString("dd/MM/yyyy") : "")</a>
                            </td>
                            <td>
                                <a href="/Admin/ChangeInfo" class="show-tab"><i class="fa fa-pencil edit-user-info">
                                </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @lang.JOINEDAY:
                            </td>
                            <td>
                                <a href="">@(@Model.INFO.CreatedDate.HasValue ? Model.INFO.CreatedDate.Value.ToString("dd/MM/yyyy") : "")</a>
                            </td>
                            <td>
                                <a href="/Admin/ChangeInfo" class="show-tab"><i class="fa fa-pencil edit-user-info">
                                </i></a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @lang.STATUS:
                            </td>
                            <td>
                                <span class="label label-sm label-info">@(Model.IsInRole("admin")?"Administrator":"Booker")</span>
                            </td>
                            <td>
                                <a href="/Admin/ChangeInfo" class="show-tab"><i class="fa fa-pencil edit-user-info">
                                </i></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-7 col-md-8">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis porta
                purus, pulvinar mattis nulla tempus ut. Curabitur quis dui orci. Ut nisi dolor,
                dignissim a aliquet quis, vulputate id dui. Proin ultrices ultrices ligula, dictum
                varius turpis faucibus non. Curabitur faucibus ultrices nunc, nec aliquet leo tempor
                cursus.
            </p>
            <div class="row">
                <div class="col-sm-3">
                    <button class="btn btn-icon btn-block">
                        <i class="clip-clip"></i>Projects <span class="badge badge-info">4 </span>
                    </button>
                </div>
                <div class="col-sm-3">
                    <button class="btn btn-icon btn-block pulsate" style="outline: 0px; box-shadow: rgba(196, 60, 53, 0) 0px 0px 13px;
                        outline-offset: 20px;">
                        <i class="clip-bubble-2"></i>Messages <span class="badge badge-info">23 </span>
                    </button>
                </div>
                <div class="col-sm-3">
                    <button class="btn btn-icon btn-block">
                        <i class="clip-calendar"></i>Calendar <span class="badge badge-info">5 </span>
                    </button>
                </div>
                <div class="col-sm-3">
                    <button class="btn btn-icon btn-block">
                        <i class="clip-list-3"></i>Notifications <span class="badge badge-info">9 </span>
                    </button>
                </div>
            </div>
            <div class="panel panel-white">
                <div class="panel-heading">
                    <i class="clip-menu"></i>Recent Activities
                    <div class="panel-tools">
                        <a class="btn btn-xs btn-link panel-collapse collapses" href="#"></a><a class="btn btn-xs btn-link panel-config"
                            href="#panel-config" data-toggle="modal"><i class="fa fa-wrench"></i></a><a class="btn btn-xs btn-link panel-refresh"
                                href="#"><i class="fa fa-refresh"></i></a><a class="btn btn-xs btn-link panel-close"
                                    href="#"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="panel-body panel-scroll ps-container" style="height: 300px">
                    <ul class="activities">
                        <li><a class="activity" href="javascript:void(0)"><i class="clip-upload-2 circle-icon circle-green">
                        </i><span class="desc">You uploaded a new release.</span>
                            <div class="time">
                                <i class="fa fa-time bigger-110"></i>2 hours ago
                            </div>
                        </a></li>
                        <li><a class="activity" href="javascript:void(0)">
                            <img alt="image" src="assets/images/avatar-2.jpg">
                            <span class="desc">Nicole Bell sent you a message.</span>
                            <div class="time">
                                <i class="fa fa-time bigger-110"></i>3 hours ago
                            </div>
                        </a></li>
                        <li><a class="activity" href="javascript:void(0)"><i class="clip-data circle-icon circle-bricky">
                        </i><span class="desc">DataBase Migration.</span>
                            <div class="time">
                                <i class="fa fa-time bigger-110"></i>5 hours ago
                            </div>
                        </a></li>
                        <li><a class="activity" href="javascript:void(0)"><i class="clip-clock circle-icon circle-teal">
                        </i><span class="desc">You added a new event to the calendar.</span>
                            <div class="time">
                                <i class="fa fa-time bigger-110"></i>8 hours ago
                            </div>
                        </a></li>
                        <li><a class="activity" href="javascript:void(0)"><i class="clip-images-2 circle-icon circle-green">
                        </i><span class="desc">Kenneth Ross uploaded new images.</span>
                            <div class="time">
                                <i class="fa fa-time bigger-110"></i>9 hours ago
                            </div>
                        </a></li>
                        <li><a class="activity" href="javascript:void(0)"><i class="clip-image circle-icon circle-green">
                        </i><span class="desc">Peter Clark uploaded a new image.</span>
                            <div class="time">
                                <i class="fa fa-time bigger-110"></i>12 hours ago
                            </div>
                        </a></li>
                    </ul>
                    <div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px; width: 623px; display: none;">
                        <div class="ps-scrollbar-x" style="left: 0px; width: 0px;">
                        </div>
                    </div>
                    <div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px; height: 300px; display: inherit;">
                        <div class="ps-scrollbar-y" style="top: 0px; height: 206px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-white">
                <div class="panel-heading">
                    <i class="clip-checkmark-2"></i>To Do
                    <div class="panel-tools">
                        <a class="btn btn-xs btn-link panel-collapse collapses" href="#"></a><a class="btn btn-xs btn-link panel-config"
                            href="#panel-config" data-toggle="modal"><i class="fa fa-wrench"></i></a><a class="btn btn-xs btn-link panel-refresh"
                                href="#"><i class="fa fa-refresh"></i></a><a class="btn btn-xs btn-link panel-close"
                                    href="#"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="panel-body panel-scroll ps-container" style="height: 300px">
                    <ul class="todo">
                        <li><a class="todo-actions" href="javascript:void(0)"><i class="fa fa-square-o"></i>
                            <span class="desc" style="opacity: 1; text-decoration: none;">Staff Meeting</span>
                            <span class="label label-danger" style="opacity: 1;">today</span> </a></li>
                        <li><a class="todo-actions" href="javascript:void(0)"><i class="fa fa-square-o"></i>
                            <span class="desc" style="opacity: 1; text-decoration: none;">New frontend layout</span>
                            <span class="label label-danger" style="opacity: 1;">today</span> </a></li>
                        <li><a class="todo-actions" href="javascript:void(0)"><i class="fa fa-square-o"></i>
                            <span class="desc">Hire developers</span> <span class="label label-warning">tommorow</span>
                        </a></li>
                        <li><a class="todo-actions" href="javascript:void(0)"><i class="fa fa-square-o"></i>
                            <span class="desc">Staff Meeting</span> <span class="label label-warning">tommorow</span>
                        </a></li>
                        <li><a class="todo-actions" href="javascript:void(0)"><i class="fa fa-square-o"></i>
                            <span class="desc">New frontend layout</span> <span class="label label-success">this
                                week</span> </a></li>
                        <li><a class="todo-actions" href="javascript:void(0)"><i class="fa fa-square-o"></i>
                            <span class="desc">Hire developers</span> <span class="label label-success">this week</span>
                        </a></li>
                        <li><a class="todo-actions" href="javascript:void(0)"><i class="fa fa-square-o"></i>
                            <span class="desc">New frontend layout</span> <span class="label label-info">this month</span>
                        </a></li>
                        <li><a class="todo-actions" href="javascript:void(0)"><i class="fa fa-square-o"></i>
                            <span class="desc">Hire developers</span> <span class="label label-info">this month</span>
                        </a></li>
                        <li><a class="todo-actions" href="javascript:void(0)"><i class="fa fa-square-o"></i>
                            <span class="desc" style="opacity: 1; text-decoration: none;">Staff Meeting</span>
                            <span class="label label-danger" style="opacity: 1;">today</span> </a></li>
                        <li><a class="todo-actions" href="javascript:void(0)"><i class="fa fa-square-o"></i>
                            <span class="desc" style="opacity: 1; text-decoration: none;">New frontend layout</span>
                            <span class="label label-danger" style="opacity: 1;">today</span> </a></li>
                        <li><a class="todo-actions" href="javascript:void(0)"><i class="fa fa-square-o"></i>
                            <span class="desc">Hire developers</span> <span class="label label-warning">tommorow</span>
                        </a></li>
                    </ul>
                    <div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px; width: 623px; display: none;">
                        <div class="ps-scrollbar-x" style="left: 0px; width: 0px;">
                        </div>
                    </div>
                    <div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px; height: 300px; display: inherit;">
                        <div class="ps-scrollbar-y" style="top: 0px; height: 215px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
